<template>
  <a-modal
    class="permission-expire-modal"
    v-model="show"
    :title="null"
    centered
    width="640px"
    :footer="null">
    <div class="model-title d-aic">
      <a-icon type="exclamation-circle" class="permission-model-icon"/>
      <div class="confirm-content mt-20">权限到期，请联系客服处理</div>
      <b-button
        type="primary"
        class="mt-20"
        style="background: #ff5f5f"
        @click="show=false"
        btnContent="知道了"/>
    </div>
  </a-modal>
</template>

<script>

  export default {
    name: 'PermissionExpireModal',
    data () {
      return {
        show: false
      }
    },
    watch: {
      '$route.path' () {
        this.init()
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        if (!this.checkPermission()) {
          this.show = true
        }
      },
      // 从路由获取当前页面的所需权限，从用户信息获取权限列表,第一次进入的时候路由好像没变化，不执行
      checkPermission () {
        // 当前页面需要的权限
        const productPermission = this.$route.meta.productPermission
        if (!productPermission) {
          return true
        }
        // 用户权限里必须要至少有一个
        let result = false
        const myProductList = this.$store.state.user.info.myProductList || []
        // 过滤出来我有权限的code
        const myProductPermission = []
        myProductList.forEach(item => {
          if (item.enabled) {
            myProductPermission.push(item.code)
          }
        })
        productPermission.forEach(item => {
            if (myProductPermission.indexOf(item) >= 0) {
              result = true
            }
        })
        return result
         // TODO 不知道什么意思？
        // let permissionCount = 0
        // const myProductList = this.$store.state.user.info.myProductList || []
        // myProductList.forEach(item => {
        //   if (item.enabled) {
        //     permissionCount += 1
        //   }
        // })
        // if (!permissionCount) {
        //   this.show = true
        // }
      }
    }
  }
</script>

<style lang="less">
  .permission-expire-modal {
    .model-title {
      flex-direction: column;
    }

    .permission-model-icon {
      font-size: 36px;
      color: #faad14;
    }

    .confirm-content {
      margin-top: 8px;
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
    }
  }
</style>
